<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>模板编辑</BreadcrumbItem>
      <BreadcrumbItem>新增跳转页</BreadcrumbItem>
    </Breadcrumb>
    <div>
      <Form :label-width="100">
        <FormItem label="名称"><Input type="text" placeholder="请输入设备名称" style="width: 150px;"></Input></FormItem>
        <FormItem label="设备编号"><Button>设备名称</Button></FormItem>
        <FormItem label="模板类型">
          <Radio v-model="single">动态单门柜</Radio>
          <p>(静态单门柜模版可放置商品数为28个)</p>
        </FormItem>
<!--        card文本框下的内容-->
        <Card style="width:900px;margin-left: 10px;">
          <p slot="title">
            <span style="font-weight: bold">可选商品列表</span>
            <span class="addMargin">可选商品列表</span>
            <span class="addMargin">占用列</span>
            <span class="addMargin">可摆放数量</span>
            <span class="addMargin"  style="font-weight: bold">已选商品列表</span>
            <span class="addMargin">商品图片</span>
            <span class="addMargin"><span>占用列</span><span>(0)</span></span>
            <span style="margin-left: 4px;">可摆放数量</span>
          </p>
          <ul>
            <li>
              <Transfer
                :data="data3"
                :target-keys="targetKeys3"
                :list-style="listStyle"
                :render-format="render3"
                :operations="['移出','移入']"
                :titles="['可选商品','已选商品']"
                filter-placeholder="请输入商品名称"
                filterable
                @on-change="handleChange3">
              </Transfer>
            </li>
          </ul>
        </Card>
        <FormItem>
          <Button type="primary">提交保存</Button>
          <Button>返回</Button>
        </FormItem>
      </Form>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //设置单选按钮的未选中状态
        single: false,
        data3: this.getMockData(),
        targetKeys3: this.getTargetKeys(),
        listStyle: {
          width: '310px',
          height: '500px'

        }
      }
    },
    methods: {
      // 自定义左侧的数据:
      getMockData () {
        let mockData = [];
        for (let i = 1; i <= 28; i++) {
          mockData.push({
            key: i.toString(),
            label: 'Content ' + i,
            description: 'The desc of content  ' + i,
            disabled: Math.random() * 3 < 1
          });
        }
        return mockData;
      },
      getTargetKeys () {
        return this.getMockData()
          .filter(() => Math.random() * 2 > 1)
          .map(item => item.key);
      },
      handleChange3 (newTargetKeys) {
        this.targetKeys3 = newTargetKeys;
      },
      render3 (item) {
        return item.label + ' - ' + item.description;
      }

    }


  };
</script>

<style scoped>
  h3 {
    line-height: 50px;
  }

  .subordinate {
    margin: 10px 20px;
  }

  .checkbox {
    margin: 5px 10px;
    min-width: 200px;
  }

  .check {
    margin-top: 5px;
    margin-left: 30px;
    min-width: 160px;
  }

  .checkboxs {
    border-bottom: 1px solid silver;
    padding-bottom: 10px;
  }

  .outer {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 5px;
  }
  .addMargin{
    margin-left: 10px;
  }
  .ivu-transfer-list{
    width: 240px;
  }
  /*去掉外边框的overflow:hidden属性*/
  .ivu-layout-content{
    overflow: auto!important;

  }
</style>
